<template>
  <Content title="车间生产">
    <view class="device-details">
      <view class="content">
        <view class="top-box">
          <view class="info-box">
            <view class="text-box">
              <text class="label">设备编号:</text>
              <text class="value">{{ model.deviceNo }}</text>
            </view>
            <view class="text-box">
              <text class="label">设备品牌:</text>
              <text class="value">{{ model.brand }}</text>
            </view>
            <view class="text-box">
              <text class="label">设备型号:</text>
              <text class="value">{{ model.deviceSpec }}</text>
            </view>
          </view>
        </view>
        <view class="main-box">
          <template v-if="data && data.length > 0">
            <scroll-view
              class="home-list"
              scroll-y
              @scrolltolower="scrollBottom"
              :refresher-triggered="triggered"
              :refresher-threshold="100"
              @refresherrestore="onRestore"
              refresher-enabled
              @refresherrefresh="onRefresh"
              :ower-threshold="0"
            >
              <view
                class="info-box"
                v-for="(item, index) in data"
                :key="item.id"
              >
                <view class="title" @click="toPath(item, index)">
                  <text class="txt u-line-1">工单号 {{ item.workCode }}</text>
                  <view class="tag-box">
                    <u-tag
                      shape="circle"
                      @click="toPath(item, index)"
                      :text="item.state"
                      :borderColor="getColor(item.state)"
                      :bgColor="getColor(item.state)"
                    ></u-tag>
                    <uni-icons type="right" size="14" v-if="index === 0" />
                  </view>
                </view>
                <view class="text-box">
                  <text class="label">产品编号:</text>
                  <text class="value">{{ item.materialCode }}</text>
                </view>
                <view class="text-box">
                  <text class="label">产品名称:</text>
                  <text class="value">{{ item.materialName }}</text>
                </view>
                <view class="text-box">
                  <text class="label">设备编号:</text>
                  <text class="value">{{ item.deviceCode }}</text>
                </view>
                <view class="text-box">
                  <text class="label">模具编号:</text>
                  <text class="value">{{ item.moldCode }}</text>
                </view>
                <view class="text-box">
                  <text class="label">模具名称:</text>
                  <text class="value">{{ item.moldName }}</text>
                </view>
                <view class="text-box">
                  <text class="label">计划数量:</text>
                  <text class="value">{{ item.planProduceQuantity }}</text>
                </view>
                <view class="text-box">
                  <text class="label">生产数量:</text>
                  <text class="value">{{ item.produceQuantity }}</text>
                </view>
                <view class="text-box">
                  <text class="label">合格数量:</text>
                  <text class="value">{{ item.qualifiedQuantity }}</text>
                </view>
                <view class="text-box">
                  <text class="label">报废数量:</text>
                  <text class="value">{{ item.scrapQuantity }}</text>
                </view>
                <view class="text-box">
                  <text class="label">图号规格:</text>
                  <text class="value">{{ item.customMaterialCode }}</text>
                </view>
                <view class="text-box">
                  <text class="label">材料牌号:</text>
                  <text class="value">{{ item.materialMark }}</text>
                </view>
                <view class="text-box" v-if="item.cuttingPlanCode">
                  <text class="label">开料详情:</text>
                  <text
                    class="value"
                    @click="selectCuttingPlan(item)"
                    style="color: #3c9cff"
                    >查看开料计划单</text
                  >
                </view>
                <view class="text-box">
                  <text class="label">备注:</text>
                  <text class="value">{{ item.remarks }}</text>
                </view>
              </view>

              <view class="loading animation-scale-up" v-if="loading"></view>
              <view class="scroll-no-data" v-if="noData">已拉到最底部</view>
            </scroll-view>
          </template>
          <template v-else>
            <view class="info-box">
              <Empty />
            </view>
          </template>
        </view>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import MyDate from "@/components/myDate.vue";
import { listMixins } from "@/mixins/list";
import Empty from "@/components/empty";
import { setPageData, getPageData } from "@/store/user";
export default {
  mixins: [listMixins],
  components: {
    Content,
    Empty,
    MyDate,
  },
  data() {
    return {
      model: {},
      data: [],
      listUrl: "/dms/mobile/selectWorkByDeviceId",
      search: {
        deviceId: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.model = getPageData();
    this.search.deviceId = option.id;
  },

  computed: {},
  mounted() {},
  methods: {
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    selectCuttingPlan(item) {
      uni.navigateTo({
        url:
          "/pages/staging/workshop-production/select-cutting-plan?cuttingPlanCode=" +
          item.cuttingPlanCode,
        animationType: "pop-in",
      });
    },
    toPath(item, index) {
      if (index !== 0) return;
      setPageData(item);
      uni.navigateTo({
        url:
          "/pages/staging/workshop-production/work-order-operation?workCode=" +
          item.workCode,
        animationType: "pop-in",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .main-box {
    flex: 1;
    overflow: auto;
  }
  .home-list {
    height: 100%;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }
}
</style>
